﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CommodityTypeV</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-unselect dl {
            max-height: 200px;
        }
        .treeTable-icon .layui-icon-file:before { /*修改文件图标：*/
            content: "";
        }

        /** 未展开-文件夹 */
        .treeTable-icon .layui-icon-layer:before {
            content: "";
        }
        /** 展开-文件夹 */
        .treeTable-icon.open .layui-icon-layer:before {
            content: "";
        }

        /** 未展开-箭头 */ .treeTable-icon .layui-icon-triangle-d:before {
            content: "\e623";
        }
        /** 展开-箭头 */

        .treeTable-icon.open .layui-icon-triangle-d:before {
            content: "\e625";
        }
    </style>
</head>
<body>
    <div class="layui-container">


        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
                <button class="layui-btn layui-btn-sm" lay-event="expand">全部展开</button>
                <button class="layui-btn layui-btn-sm" lay-event="fold">全部折叠</button>
            </div>
        </script>
        <table id="table1" class="layui-table" lay-filter="table1"></table>
    </div>

    <form class="layui-form" action="" id="pro" lay-filter="proForm" style="display:none;height:330px;">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="radio" lay-filter="rad" name="red" value="1" title="一级分类">
                <input type="radio" lay-filter="rad" name="red" value="2" title="二级分类">
                <input type="radio" lay-filter="rad" name="red" value="3" title="三级分类">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类：</label>
            <div class="layui-input-inline" style="width:100px;display:none;" id="proBig">
                <select lay-filter="proBig" name="proBig" id="xBig"></select>
            </div>
            <div class="layui-input-inline" style="width:100px;display:none;" id="proCentre">
                <select lay-filter="proCentre" name="proCentre" id="xCentre"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称：</label>
            <div class="layui-input-inline" style="width:100px;">
                <input type="text" Id="proName" name="proName" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
    </form>



    <script src="~/js/jquery-2.2.4.min.js"></script>
    <script src="~/layui/layui.js"></script>
    <script>
        var pickData = null;
        var typeData = null;
        var proCentre = 0;
        var proBig = 0;
        var proRad = 0;
        var id = 0;
        var form = null;

        $.get("/Shop/CommodityType", function (res) {
            typeData = res.data;
            var an = typeData.filter((item) => {
                return item.parentId == 0;
            });
            var select = JSON.parse(JSON.stringify(an));
            var selectStr = ('<option value="' + 0 + '">' + '请选择' + '</option>');
            for (var i = 0; i < select.length; i++) {
                var node = ('<option value="' + select[i].id + '">' + select[i].name + '</option>');
                selectStr += node;
            }
            $("#proBig select").html(selectStr);
        });

        window.onload = function () {
            var f = false;
            window.onscroll = function () {
                var bodyHeight = document.body.clientHeight;
                if (f) bodyHeight = bodyHeight + 50;
                this.console.log(bodyHeight);
                if (bodyHeight > 705 && f) {
                    var top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;//w3c，各ie的兼容
                    if (top > 100) {
                        $(".layui-table-tool").css("position", "fixed").css("width", "auto").css("margin-top", "10px");
                    } else if (top < 10) {
                        $(".layui-table-tool").css("position", "relative").css("width", "100%").css("margin-top", "0px");
                    }
                }
                f = true;
            }
        }

        layui.config({
            base: '/layui/module/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['treetable'], function () {
            var treetable = layui.treetable;
            form = layui.form;

            form.render('select'); //刷新select选择框渲染
            // 渲染表格
            treetable.render({
                treeColIndex: 2,          // 树形图标显示在第几列
                treeSpid: "0",             // 最上级的父级id
                treeIdName: 'id',       // id字段的名称
                treePidName: 'parentId',     //pid字段的名称
                treeDefaultClose: true,   // 是否默认折叠
                treeLinkage: false,        // 父级展开时是否自动展开所有子级
                elem: '#table1',
                url: "/Shop/CommodityType"
                , toolbar: '#toolbarDemo'
                , id: 'idTree'//便于重载表格
                , cols: [[
                    { type: 'space', hide: true },
                    { field: 'id', title: 'id' },
                    { field: 'name', title: 'name' },
                ]]
            });

            layui.table.on('row(table1)', function (obj) {
                //console.log(obj.tr) //得到当前行元素对象
                console.log(obj.data) //得到当前行数据
                $(".layui-table-body tr").each(function (ii, vv) {
                    //ii 指第几个元素的序列号。
                    //vv 指遍历得到的元素。
                    $(this).css("background-color", "#fff");
                });
                $(obj.tr.selector).css("background-color", "antiquewhite");
                pickData = obj.data;
                id = obj.data.id;
            });

            //监听工具栏
            layui.table.on('toolbar(table1)', function (obj) {
                console.log(obj);
                switch (obj.event) {
                    case 'add':
                        $('#pro')[0].reset();
                        $("#proCentre select").empty(); form.render('select');
                        layer.prompt({
                            title: obj.event,
                            anim: 1,
                            content: $("#pro"),
                            yes: function (index, layero) {
                                if (proRad == 0) {
                                    layer.msg('请正确选择分类！', { time: 1000 }); return;
                                } else if (proRad == 2) {
                                    if (proBig == 0) {
                                        layer.msg('请正确选择分类！', { time: 1000 }); return;
                                    }
                                } else if (proRad==3) {
                                    if (proCentre == 0) {
                                        layer.msg('请正确选择分类！', { time: 1000 }); return;
                                    }
                                }
                                if ($('#proName').val() == '') {
                                    layer.msg('分类名称不能为空！', { time: 1000 }); return;
                                }
                                $.ajax({
                                    url: "/shop/CommodityTypeAddOrUpdate",
                                    data: { 'rad': proRad, 'id': 0, 'typeName': $('#proName').val(), 'big': proBig, 'centre': proCentre, 'actionType': obj.event },
                                    type: "get",
                                    success: function (res) {
                                        layer.msg(res.msg, { time: 1000 });
                                        if (res.success) {
                                            window.location.reload();
                                            layer.close(index);//如果设定了yes回调，需进行手工关闭
                                        }
                                    }
                                });
                            }, end : function (index, layero) {
                                $("#proBig").hide();
                                $("#proCentre").hide();
                            }
                        });
                        break;
                    case 'delete':
                        if (pickData == undefined || pickData.length == 0||id==0) {
                            layer.msg('请选择要删除的信息！', { time: 1000 }); return;
                        }
                        layer.confirm("您确定要删除该条信息吗？", { btn: ['确定', '取消'], title: "提示" }, function (index) {
                            if (JSON.parse(JSON.stringify(typeData.filter((item) => { return item.parentId == id }))).length > 0) {
                                layer.msg('该信息，还有子级！', { time: 1000 }); layer.close(index);return;
                            }
                            $.get("/shop/CommodityTypeDelete", { "id": id }, function (res) {
                                if (res.success) {
                                    window.location.reload();
                                    layer.close(index);//如果设定了yes回调，需进行手工关闭
                                }
                            });
                        });
                        break;
                    case 'update':
                        if (pickData == undefined || pickData.length == 0) {
                            layer.msg('请选择要编辑的信息！', { time: 1000 }); return;
                        }
                        $('#pro')[0].reset();
                        $("#proCentre select").empty(); form.render('select');
                        if (pickData.parentId == 0) {
                            $("input[name='red'][title='一级分类']").attr('checked', true);
                            proRad = 1;
                            $('#xBig').siblings("div.layui-form-select").find('dl').find('dd[lay-value=' + pickData.id + ']').click();
                            xbig = pickData.id;
                            $("#proBig").hide();
                            $("#proCentre").hide();
                        } else {
                            var one = JSON.parse(JSON.stringify(typeData.filter((item) => { return item.id == pickData.parentId; })))[0];
                            var xbig = one.parentId == 0 ? one.id : one.parentId;
                            $('#xBig').siblings("div.layui-form-select").find('dl').find('dd[lay-value=' + xbig + ']').click();
                            proBig = xbig;
                            $("#proBig").show();
                            $("input[name='red'][title='二级分类']").attr('checked', true);
                            proRad = 2;
                            if (one.parentId != 0) {
                                $('#xCentre').siblings("div.layui-form-select").find('dl').find('dd[lay-value=' + one.id + ']').click();
                                proCentre = one.id;
                                $("#proCentre").show();
                                $("input[name='red'][title='三级分类']").attr('checked', true);
                                proRad = 3;
                            }
                        }
                        $('#proName').val(pickData.name);
                        form.render('radio');
                        layer.prompt({
                            title: obj.event,
                            anim: 1,
                            content: $("#pro"),
                            yes: function (index, layero) {
                                if (proRad == 0) {
                                    layer.msg('请正确选择分类！', { time: 1000 }); return;
                                } else if (proRad == 2) {
                                    if (proBig == 0) {
                                        layer.msg('请正确选择分类！', { time: 1000 }); return;
                                    }
                                } else if (proRad==3) {
                                    if (proCentre == 0) {
                                        layer.msg('请正确选择分类！', { time: 1000 }); return;
                                    }
                                }
                                if ($('#proName').val() == '') {
                                    layer.msg('分类名称不能为空！', { time: 1000 }); return;
                                }
                                $.ajax({
                                    url: "/shop/CommodityTypeAddOrUpdate",
                                    data: { 'rad': proRad, 'id': id, 'typeName': $('#proName').val(), 'big': proBig, 'centre': proCentre, 'actionType': obj.event },
                                    type: "get",
                                    success: function (res) {
                                        layer.msg(res.msg, { time: 1000 });
                                        if (res.success) {
                                            window.location.reload();
                                            layer.close(index);//如果设定了yes回调，需进行手工关闭
                                        }
                                    }
                                });
                            }, end: function (index, layero) {
                                $("#proBig").hide();
                                $("#proCentre").hide();
                            }
                        });
                        break;
                    case 'expand':
                        treetable.expandAll('#table1');
                        break;
                    case 'fold':
                        treetable.foldAll('#table1');
                        break;
                };
            });

            //单选按钮
            layui.form.on('radio(rad)', function (data) {
                console.log(data.value + '级分类'); //被点击的radio的value值
                proRad = data.value;
                if (data.value == 1) {
                    $("#proBig").hide();
                    $("#proCentre").hide();
                } else if (data.value == 2) {
                    $("#proBig").show();
                    $("#proCentre").hide();
                } else {
                    $("#proBig").show();
                    $("#proCentre").show();
                }
            });
            // 下拉框
            form.on('select(proBig)', function (data) {
                proBig = data.value;
                if (proBig == 0) { $("#proCentre select").empty(); form.render('select');return;}
                var an = typeData.filter((item) => {
                    return item.parentId == proBig;
                });
                var select = JSON.parse(JSON.stringify(an));
                var selectStr = ('<option value="' + 0 + '">' + '请选择' + '</option>');
                for (var i = 0; i < select.length; i++) {
                    var node = ('<option value="' + select[i].id + '">' + select[i].name + '</option>');
                    selectStr += node;
                }
                $("#proCentre select").html(selectStr);
                form.render('select'); //刷新select选择框渲染
            });
            form.on('select(proCentre)', function (data) {
                proCentre = data.value;
            });










        });
    </script>
</body>
</html>
